<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<head>
<%@include file="/WEB-INF/common/hplus-css.jsp"%>
<link rel="shortcut icon" href="${path}/favicon.ico" rel="stylesheet">
<link href="${path}/assets/hplus/css/bootstrap.min.css?v=3.3.6"
    rel="stylesheet">
<link href="${path}/assets/hplus/css/font-awesome.min.css?v=4.4.0"
    rel="stylesheet">
<link href="${path}/assets/hplus/css/animate.css" rel="stylesheet">
<link href="${path}/assets/hplus/css/style.css?v=4.1.0" rel="stylesheet">
<link href="${path}/assets/hplus/css/font-awesome.min.css?v=4.4.0"
    rel="stylesheet">
<link href="${path}/assets/hplus/css/plugins/jsTree/style.min.css"
    rel="stylesheet">
<link href="${path}/assets/hplus/css/plugins/jqgrid/ui.jqgrid.css?0820"
    rel="stylesheet">
</head>
<body>
    <div class="wrapper wrapper-content  animated fadeInRight">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox ">
                    <div class="ibox-title">
                        <h5>机构部门</h5>
                    </div>
                    <div class="jqGrid_wrapper">
                        <div class="ibox-content">
                            <div id="jstree"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <%@include file="/WEB-INF/common/hplus-js.jsp"%>
    <!-- Peity -->
    <script src="${path}/assets/hplus/js/plugins/peity/jquery.peity.min.js"></script>
    <script src="${path}/assets/hplus/js/content.js"></script>
    <script src="${path}/assets/hplus/js/plugins/jsTree/jstree.min.js"></script>
    <!-- jqGrid -->
    <script
        src="${path}/assets/hplus/js/plugins/jqgrid/i18n/grid.locale-cn.js?0820"></script>
    <script
        src="${path}/assets/hplus/js/plugins/jqgrid/jquery.jqGrid.min.js?0820"></script>
    <script>
        $(document).ready(function() {
        	 var menu = "${path}/assets/image/common/icon/32x32/menu.png";
        	 var button = "${path}/assets/image/common/icon/32x32/button.png";
             $('#jstree').data('jstree', false).empty();
                $("#jstree").jstree({
                    'state': {
                         "opened":true,
                    },
                    "core" : {
                        "themes" : {
                            "responsive": false
                        }, 
                        // so that create works
                        "check_callback" : true,
                        'data' : function (obj, callback) {
                            var jsonstr="[]";
                            var jsonarray = eval('('+jsonstr+')');
                            $.ajax({
                                type: "POST",
                                url:"${path}/organ/query",
                                dataType:"json",
                                async: false,
                                success:function(result) {
                                    var arrays= result;
                                    for(var i=0 ; i<arrays.length; i++){
                                        var arr = {
                                           "id":arrays[i].id,
                                           "parent":arrays[i].pid?arrays[i].pid:"#",
                                           "text":arrays[i].name,
                                           "icon":menu
                                        }
                                        jsonarray.push(arr);
                                    }
                                }
                            });
                            callback.call(this, jsonarray);
                        }
                    },
                    "types" : {
                        "default" : {
                            "icon" : "fa fa-folder"
                        },
                        "file" : {
                            "icon" : "fa fa-file"
                        },
                        'state': {
                            "opened":true,
                       },
                    },
                    //"state" : { "key" : "demo3" },
                    "checkbox" : {
                        "keep_selected_style" : false
                    },
                    "contextmenu":{
                        select_node:false,
                        show_at_node:true,
                        "items":{
                            "create":{
                                "label":"新增",
                                "icon":"glyphicon glyphicon-plus",
                                "action":function(data){
                                    var inst = $.jstree.reference(data.reference);
                                    var obj = inst.get_node(data.reference);
                                    addmenu(obj.id);
                                    $("#jstree").jstree(true).refresh();
                                }
                            },
                            "edit":{
                                "label":"修改",
                                "icon":"glyphicon glyphicon-edit",
                                "action":function(data){
                                    var inst = $.jstree.reference(data.reference);
                                    var obj = inst.get_node(data.reference);
                                    editmenu(obj.id)
                                    $("#jstree").jstree(true).refresh();
                                }
                            },
                            "remove":{
                                "label":"删除",
                                "icon":"glyphicon glyphicon-remove",
                                "action":function(data){
                                    var inst = $.jstree.reference(data.reference);
                                    var obj = inst.get_node(data.reference);
                                     var children = $("#jstree").jstree("get_children_dom",data);
                                    deletemenu(obj)
                                    $("#jstree").jstree(true).refresh();
                                }
                            }
                        }
                    },
                    "plugins" : [ "dnd","state","contextmenu"]
                });
                
                $('#jstree').bind("loaded.jstree", function (e, data) {
                    $('#jstree').jstree("open_all");
                });
                var i =0;
                $("#jstree").on('changed.jstree', function (e, node) {
                    console.log("点击树")
                    if(i==2){
                        console.log("关闭树")
                    window.parent.closeTree(node.instance.get_node(node.selected[0]).id ,node.instance.get_node(node.selected[0]).text);
                    }
                    i++;
                })
            
            $(window).bind('resize', function() {
                var width = $('.jqGrid_wrapper').width();
                $('#table_menu').setGridWidth(width);
            });
            $(window).trigger("resize");
            $("#btn-query").click(function() {
                $("#table_menu").jqGrid('setGridParam',
                {
                    url : "${path}/menu/query",
                    datatype : 'json',
                    postData : {
                        "name" : $("#name").val(),
                        "address" : $("#address").val(),
                        "status" : $("#status option:selected").val()
                    },
                    page : 1
                }).trigger("reloadGrid"); //重新载入
            });
        });
        function addmenu(pid){
            //location.href='${path}/organ/add/' + pid;
            layer.open({
                type : 2,
                title : '部门添加',
                shadeClose : true,
                shade : 0.5,
                area : [ '800px', '460px' ],
                content : '${path}/organ/add/' + pid//iframe的url
            });
        };
        function editmenu(id) {
            layer.open({
                type : 2,
                title : '修改部门',
                shadeClose : true,
                shade : 0.5,
                area : [ '800px', '460px' ],
                content : '${path}/organ/edit/' + id //iframe的url
            });
        }
        function deletemenu(obj) {
            var op = ("删除");
            layer.confirm("您确定要" + op +obj.text+ "部门吗? 该部门下所有部门及人员将不可用", {
                btn : [ '确定', '取消' ], //按钮
                shade : true, //不显示遮罩
                shadeClose : true,
                shade : 0.5,
            }, function() {
                $.ajax({
                    type : "POST",
                    url : "${path}/organ/delete/" + obj.id,
                    dataType : "json",
                    success : function(json) {
                        if (json.code == 0) {
                            parent.layer.closeAll();
                            layer.msg(op + '成功', {
                                icon : 1
                            });
                            setTimeout(function() {
                                location.reload();
                            }, 500);
                        } else {
                            layer.msg(op + '发生错误:' + json.msg, {
                                icon : 5
                            });
                        }
                    }
                });
            }, function() {});
        }
    </script>
</body>
</html>